<template>
  <div>
    <el-dialog
      title="商品规格选择"
      :visible.sync="createModal"
      width="80%"
      top="5vh"
    >
      <el-container style="position: relative; height: 70vh">
        
        <el-container>
          <!-- 侧边栏 -->
          <el-aside
            width="200px"
            class="elAside bg-white border-right"
          >
            <ul class="list-group">
              <li class="list-group-item list-group-item-action " v-for="(item,index) in skuList" :key="index" :class="{'sum-active': skuIndex === index}" @click="changeSku(index)" style="cursor:pointer">{{item.name}}</li>
            </ul>
          </el-aside>
          <!-- 主体内容部分 -->
          <el-container class="mainContainer">
              <el-header class="selAll border-top border-bottom">
                  <el-button type="primary" size="mini" @click="doChooseAll">
                      {{checkAll ? '取消全选' : '全选'}}
                  </el-button>
              </el-header>
            <el-main>
              <!-- 主内容 -->
                <div class="d-flex">
                    <span class="border rounded d-flex align-items-center justify-content-center mr-3" 
                    style="width:55px;height:30px;cursor:pointer" v-for="(item,index) in skuItem" :key="index" @click="choose(item)" :class="item.isCheck ? 'sum-active':''">
                        {{item.name}}
                    </span>
                </div>
              <!-- /主内容 -->
            </el-main>
          </el-container>
        </el-container>
       
      </el-container>
      <div slot="footer">
        <el-button @click="hide">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

export default {
  data() {
    return {
      createModal: false,
      callback: false,
      chooseList: [],
      skuIndex: 1,
      skuList: [
            {
                name: '颜色',
                type: 0,
                list: [{
                    id: 1,
                    name:'黄色',
                    image: '',
                    color: '',
                    isCheck: false
                },
                {
                    id: 2,
                    name:'红色',
                    image: '',
                    color: '',
                    isCheck: false
                }]
            },
            {
                id: 3,
                name: '大小',
                type: 0,
                list: [{
                    name:'XL',
                    image: '',
                    color: '',
                    isCheck: false
                },
                {
                    id: 4,
                    name:'XXL',
                    image: '',
                    color: '',
                    isCheck: false
                },{
                    id: 5,
                    name:'XXXL',
                    image: '',
                    color: '',
                    isCheck: false
                }]
            }
        ],
    };
  },
  computed:{
    //   选择选择的列表项
      skuItem() {
          return this.skuList[this.skuIndex].list
      },
    //   判断是否已经全选
      checkAll() {
          return this.chooseList.length === this.skuItem.length
      }
  },
  components: {},
  props: {},
  created() {
    this.__initAlbum();
  },

  methods: {
    //   取消全选
    unChooseAll() {
        this.skuList[this.skuIndex].list.forEach(v => {
            v.isCheck = false
        })
        return this.chooseList = []
    },
    //   全选按钮
    doChooseAll() {
        if (this.checkAll) {
            this.unChooseAll()
        } else {
            // 如果未全选
            this.chooseList = this.skuList[this.skuIndex].list.map(v => {
                v.isCheck = true
                return v
            })
        }
    },
    //   选择规格属性
    choose(item) {
        // 如果之前未选中
        if (!item.isCheck) {
            this.chooseList.push(item)
            return item.isCheck = true
        }
        // 如果已选择 先在chooseList中找到该索引
        let index = this.chooseList.findIndex(v => {
            return v.id === item.id
        })
        if (index < 0) return
        this.chooseList.splice(index, 1)
        item.isCheck = false
    },
    //   切换列表项
    changeSku(index) {
        // 切换时 先把当前选择清空
        this.unChooseAll()
        this.skuIndex = index
    },
    show(callback) {
      this.callback = callback;
      this.createModal = true
    },
    confirm() {
        // 选中的sku
      if (typeof this.callback === "function") {
        this.callback({
             id: this.skuList[this.skuIndex].id,
             name: this.skuList[this.skuIndex].name,
             type: this.skuList[this.skuIndex].type,
             list: this.chooseList
        });
      }
      this.hide();
    },
    hide() {
      this.unChooseAll()
      this.createModal = false;
    },
    
    // 初始化
    __initAlbum() {
      
    }
  }
};
</script>
<style lang="less" scoped>
.elAside {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
.mainContainer {
  position: absolute;
  top: 60px;
  bottom: 0;
  left: 200px;
  right: 0;
}
.imgText {
  position: absolute;
  margin-top: -25px;
  text-align: left;
  padding-left: 10px;
  height: 25px;
  line-height: 25px;
  color: white;
  background: rgba(0, 0, 0, 0.5);
}
.btnGroup {
  position: absolute;
  width: 140px;
  margin-top: 5px;
  margin-left: 5px;
}
.sum-active {
  color: #67c23a !important;
  background-color: #f0f9eb !important;
  border-color: #c2e7b0 !important;
}
/deep/.el-dialog__wrapper {
  .el-dialog__body {
    padding-left: 5px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}
.selAll{
    position: absolute;
    top: -60px;
    line-height: 60px;
    width: 100%;
}
</style>
